<template>
  <div class="preview">
    <el-form
      :ref="formConf.formModel"
      :rules="rules"
      :size="formConf.size"
      :model="form"
      :label-position="formConf.labelPosition"
      :disabled="formConf.disabled"
      :validate-on-rule-change="false"
      label-width="formConf.labelWidth + 'px'"
    >
      <template v-for="(element, index) in list">
        <!-- <el-input v-model="element.id" placeholder=""></el-input> -->
        <preview-row-item v-if="element.compType === 'row'" :key="'row-' + index" :model="element">
          <el-col v-for="column in element.columns" :key="column.index" :span="column.span">
            <template v-for="col in column.list">
              <preview-item
                v-if="col.compType !== 'dynamicTable'"
                :key="col.id"
                v-model="form[col.id]"
                :model="col"
                @valChange="handlerValChange"
              />
              <fancy-dynamic-table
                v-else-if="col.compType === 'dynamicTable'"
                ref="dynamicTable"
                :key="'dynamic-' + index"
                :data="form[col.id]"
                :conf="col"
                @addRow="handlerAddRow"
                @deleteRow="handlerDeleteRow"
                @batchDeleteRow="handlerBatchDeleteRow"
              >
                <template #item="{ rowScope, item }">
                  <fancy-dynamic-table-item
                    :key="'tableIndex-' + rowScope.$index"
                    v-model="rowScope.row[item.id]"
                    :model="item"
                    :parent="col"
                    :index="rowScope.$index"
                    @valChange="handlerDynamicValChange"
                  />
                </template>
              </fancy-dynamic-table>
            </template>
          </el-col>
        </preview-row-item>
        <fancy-dynamic-table
          v-else-if="element.compType === 'dynamicTable'"
          :key="'dynamic-' + index"
          :ref="element.id"
          :data="form[element.id]"
          :conf="element"
          @addRow="handlerAddRow"
          @deleteRow="handlerDeleteRow"
          @batchDeleteRow="handlerBatchDeleteRow"
        >
          <template #item="{ rowScope, item }">
            <fancy-dynamic-table-item
              :key="'tableIndex-' + item.id"
              v-model:value="rowScope.row[item.id]"
              :model="item"
              :parent="element"
              :index="rowScope.$index"
              @valChange="handlerDynamicValChange"
            />
          </template>
        </fancy-dynamic-table>
        <fancy-edit-table
          v-else-if="element.compType === 'table'"
          :layout-array="element.layoutArray"
          :td-style="element.tdStyle"
          :width="element.width"
          :height="element.height"
        >
          <template #default="{ td }">
            <template v-for="col in td.columns">
              <preview-item v-model="form[col.id]" :model="col" @valChange="handlerValChange" />
            </template>
          </template>
        </fancy-edit-table>
        <!--item-->
        <el-col v-else :key="index" class="drag-col-wrapper" :span="element.span">
          <preview-item v-model="form[element.id]" :model="element" @valChange="handlerValChange" />
        </el-col>
      </template>
    </el-form>
    <el-divider></el-divider>
    <!-- <div style="text-align: center">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerSubForm">提交</el-button>
      </span>
    </div> -->
  </div>
</template>
<script>
  import previewItem from './previewItem.jsx';
  import previewRowItem from './previewRowItem.vue';
  import fancyDynamicTable from './dynamic/fancyDynamicTable.vue';
  import fancyDynamicTableItem from './dynamic/fancyDynamicTableItem.jsx';
  import fancyEditTable from './table/fancyEditTable.vue';
  import { datas, addRow, batchDeleteRow, deleteRow } from './custom/formDraw';
  export default {
    name: 'Preview',
    components: {
      previewItem,
      previewRowItem,
      fancyDynamicTable,
      fancyDynamicTableItem,
      fancyEditTable,
    },
    props: ['itemList', 'formConf'],
    data() {
      return {
        list: this.itemList,
        form: {},
        rules: {},
        currentIndex: -1,
      };
    },
    created() {
      this.handlerInitDatas(); //初始化表单
    },
    mounted() {
      this.$nextTick(() => {});
    },
    methods: {
      handlerValChange(key, origin) {
        this.form[key] = origin;
      },
      handlerDynamicValChange(parentId, index, key, origin) {
        this.form[parentId][index][key] = origin
        console.log(this.form, parentId, index, key , origin)
        // this.$set(this.form[parentId][index], key, origin);
        this.currentIndex = index;
      },
      async handlerSubForm() {
        const res = await this.$refs[this.formConf.formModel].validate();
        if (res) {
          return {
            config: this.formConf,
            list: this.list,
            keyValueList: this.form,
          };
        }
      },
      handlerAddRow: addRow,
      handlerDeleteRow: deleteRow,
      handlerBatchDeleteRow: batchDeleteRow,
      handlerInitDatas: datas,
    },
  };
</script>
<style scoped>
  .preview-board {
    border: 1px dashed #ccc;
  }

  .preview :deep(.el-radio.is-bordered + .el-radio.is-bordered) {
    margin-left: 0;
  }

  .preview :deep(.el-checkbox.is-bordered + .el-checkbox.is-bordered) {
    margin-left: 0;
  }
</style>
